<template>
    <div class="shopcar-container">
        <!-- 商品模块 -->
        <div class="mui-card" v-for="item in goods_list" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch v-model="goods_selected[item.id]" @change="changeGoodsSelected(item.id)"></mt-switch>
                    <img :src="item.thumb_path">
                    <div class="goods-info">
                        <h1>{{ item.title }}</h1>
                        <h1 class="price">￥&nbsp;{{ item.sell_price }}</h1>
                        <number-box :count="goods_car_count[item.id]" :id="item.id" :max="goods_stock_quantity[item.id]" @changeTotalInfo="changeTotalInfo"></number-box>
                        <a href="#" @click.prevent="deleteItem(item.id)">删除</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 结算模块 -->
        <div class="mui-card car-total-info">
            <div class="mui-card-content">
                <div class="mui-card-content-inner mui-card-content-inner-total-info">
                    <p class="car-total-info-text">
                        <span>总计（不含运费）</span>
                        <span>已勾选商品<span class="red-bolder">{{ total_info.count }}</span>件，总价<span class="red-bolder">￥&nbsp;{{ total_info.price }}</span></span>
                    </p>
                    <mt-button type="danger" size="small">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import numberBox from '../subcomponents/shop_car_number_box.vue'
export default {
    data(){
        return {
            goods_list: [],
            goods_car_count: {},
            goods_stock_quantity: {},
            goods_selected: {},
            total_info: {
                count: 0,
                price: 0
            }
        }
    },
    created(){
        this.getShopCarGoodsList()
    },
    methods: {
        deleteItem(id){
            this.goods_list.some((val, index, arr) => {
                if(val.id === id) {
                    arr.splice(index, 1)
                    return true
                }
            })
            this.$store.commit('deleteItem', {id: id})
            this.changeTotalInfo()
        },
        changeGoodsSelected(id){
            this.$store.commit('changeSelected', {id: id})
            this.changeTotalInfo()
        },
        getShopCarGoodsList(){
            let ids = []
            this.$store.getters.getCar.forEach(obj => ids.push(obj.goods_id))
            this.$http
                .get('api/goods/getshopcarlist/' + ids.join(','))
                .then(data => {
                    if (data.body.status === 0) {
                        this.goods_list = data.body.message
                        this.changeTotalInfo()
                    }
                })
        },
        changeTotalInfo(){
            this.goods_car_count = this.$store.getters.getGoodsCount
            this.goods_stock_quantity = this.$store.getters.getGoodsStockQuantity
            this.goods_selected = this.$store.getters.getGoodsSelected
            this.total_info = {count: 0, price: 0}
            this.goods_list.forEach(val => {
                if (this.goods_selected[val.id]) {
                    this.total_info.count += this.goods_car_count[val.id]
                    this.total_info.price +=  (val.sell_price * this.goods_car_count[val.id])
                }
                return val
            })
        }
    },
    watch: {
        'this.$store.state' : function(){
            console.log(321)
            this.changeTotalInfo()
        },

    },
    components: {
        'number-box': numberBox
    }
}
</script>

<style lang="scss" scoped>
    .shopcar-container {
        background-color: #eee;
        transition: all 1s ease;
        .mui-card-content-inner{
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                margin-left: 5px;
                width: 50px;
            }
            .goods-info{
                margin-left: 3px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                h1{
                    font-size: 14px;
                }
                .price{
                    color:red;
                    font-weight: bolder;
                }
                a{
                    margin-left: 5px;
                }
            }
        }
        .mui-card-content-inner-total-info{
            .red-bolder{
                color: red; 
                font-weight:bolder;
            }
            .car-total-info{
                display: flex;
                width: 50%;
                height: 100%;
                justify-content: space-between;
                .car-total-info-text{
                    display: flex;
                    flex-direction: column;
                }
            }
        }
    }
</style>
